<template>
  <zc-card>
    <avue-crud
      ref="crud"
      :option="option"
      :page.sync="page"
      :table-loading="loading"
      @on-load="getList"
      @row-update="rowUpdate"
      :upload-after="uploadAfter"
      :upload-before="uploadBefore"
      @row-save="rowSave"
      @row-del="rowDel"
      @refresh-change="refreshChange"
      @search-reset="searchChange"
      @search-change="searchChange"
      v-model="form"
      :data="data"
      :permission="permission"
    >
      <template slot="state" slot-scope="scope">
        <el-switch
          :disabled="!permission.editBtn"
          @change="
            (e) => {
              switchChange(e, scope.row.id);
            }
          "
          v-model="scope.row.state"
          :active-value="1"
          :inactive-value="2"
          active-color="#1890ff"
          inactive-color="#DCDFE6"
        ></el-switch>
      </template>
      <template slot="id" slot-scope="scope">
        <div>开始时间：{{ scope.row.start_time }}</div>
        <div>结束时间：{{ scope.row.end_time }}</div>
      </template>

      <!-- <template slot-scope="scope" slot="menu">
        <el-button type="primary" :size="scope.size" @click.stop="handleEdit(scope.row,scope.index)">编辑</el-button>
        <el-button type="danger" :size="scope.size" @click.stop="handleDel(scope.row,scope.index)">删除</el-button>
      </template> -->
    </avue-crud>
  </zc-card>
</template>

<script>
import { mapGetters } from "vuex";
import { getList, update, add, del, setState } from "@/api/admin/swiper.js";
import { getList as getwxPageList } from "@/api/admin/wxpage.js";
import option from "./swiper-options.js";

export default {
  name: "swiper",
  watch: {
    // 轮播图默认显示
    "form.applets_page_id": function (newx, old) {
      let parameter = this.findObject(this.option.column, "parameter");

      let obj = this.pageList.find((e) => {
        return e.id === newx;
      });
      if (obj) {
        parameter.tip = obj.intro;
        // this.form.parameter = obj.parameter;
        parameter.value = obj.parameter;
      }

      let options = { ...this.option };
      this.option = options;
    },
    // 跳转方式
    "form.target": function (newx, old) {
      // 内部
      let applets_page_id = this.findObject(
        this.option.column,
        "applets_page_id"
      );
      // 外部
      let parameter = this.findObject(this.option.column, "parameter");
      let app_id = this.findObject(this.option.column, "app_id");
      let path = this.findObject(this.option.column, "path");
      // 连接
      let url = this.findObject(this.option.column, "url");

      if (newx == "self") {
        applets_page_id.display = true;
        parameter.display = true;
        app_id.display = false;
        path.display = false;
        url.display = false;
        let options = { ...this.option };
        this.option = options;
      }

      if (newx == "other") {
        applets_page_id.display = false;
        parameter.display = true;
        app_id.display = true;
        path.display = true;
        url.display = false;
        parameter.tip = "参数示例：id=99&num=100";
        this.form.parameter = "";
        let options = { ...this.option };
        this.option = options;
      }
      if (newx == "utside") {
        applets_page_id.display = false;
        parameter.display = false;
        app_id.display = false;
        path.display = false;
        url.display = true;
        parameter.tip = "";
        this.form.parameter = "";
        let options = { ...this.option };
        this.option = options;
      }
    },
  },
  data() {
    return {
      pageList: [], // 小程序页面
      permission: {
        addBtn: false,
        editBtn: false,
        delBtn: false,
      }, //权限
      page: {
        currentPage: 1,
        pageSize: 10,
      },
      form: {},
      params: {},
      loading: false,
      data: [],
      option: {},
    };
  },
  created() {
    // 获取小程序页面
    getwxPageList({}).then((res) => {
      this.pageList = res.data;
      // console.log(res.data);
    });
    const role = this.$defaultRoleStatus;
    this.permission.addBtn = this.zcbtn[this.$options.name + "_add"] || role;
    this.permission.editBtn = this.zcbtn[this.$options.name + "_edit"] || role;
    this.permission.delBtn = this.zcbtn[this.$options.name + "_del"] || role;
    this.permission.excelBtn =
      this.zcbtn[this.$options.name + "_excel"] || role;
    this.option = option(this);
  },
  mounted() {},
  computed: {
    ...mapGetters(["zcbtn"]),
  },
  methods: {
    // 上传前
    uploadBefore(file, done, loading) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      let index = file.name.lastIndexOf(".");
      let suffix = file.name.substr(index + 1);
      // 图片处理
      if (suffix == "png" || suffix == "jpg" || suffix == "jpeg") {
        if (!isLt2M) {
          loading();
          this.$message.error("上传图片大小不能超过 10MB!");
          return;
        } else {
          done();
          return;
        }
      } else {
        loading();
        this.$message.error("请上传正确的格式的文件");
        return;
      }

      // 文件处理

      // if (
      //   suffix == "pdf" ||
      //   suffix == "doc" ||
      //   suffix == "docx" ||
      //   suffix == "xlsx"
      // ) {
      //   this.form.info_files_name.push(fileName);
      //   this.form.info_files_suffix.push(suffix);
      //   done();
      //   return;
      // }

      // 什么都不是

      // if (suffix) {
      //   loading();
      //   this.$message.error("请上传正确的格式");
      // }
    },
    switchChange(e, id) {
      if (e == 1) {
        setState({ field: "state", value: 1, id }).then((res) => {
          this.$notify({
            title: "成功",
            message: "修改状态成功",
            type: "success",
          });
        });
      }
      if (e == 2) {
        setState({ field: "state", value: 2, id }).then((res) => {
          this.$notify({
            title: "成功",
            message: "修改状态成功",
            type: "success",
          });
        });
      }
    },
    // 自定义删除
    handleDel(row, index) {
      // console.log(this.form);
      return;
      this.$refs.crud.rowDel(row, index);
    },
    // 自定义编辑
    handleEdit(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
    uploadAfter(res, done) {
 
      done();
    },
    getList() {
      this.loading = true;
      const data = Object.assign(
        {
          page: this.page.currentPage,
          limit: this.page.pageSize,
        },
        this.params
      );
      this.data = [];
      return getList(data).then((res) => {
        this.loading = false;
        this.page.total = res.num;
        this.data = res.data;
        return Promise.resolve(true);
      });
    },
    rowSave(row, done, loading) {
      delete row.id;
      delete row.$target;
      delete row.$state;
      row.end_time = new Date(row.end_time).getTime() / 1000;
      row.start_time = new Date(row.start_time).getTime() / 1000;

      add(row)
        .then(() => {
          this.$message.success("新增成功");
          done();
          this.getList();
        })
        .catch(() => {
          loading();
        });
    },
    rowUpdate(row, index, done, loading) {
      row.end_time = new Date(row.end_time).getTime() / 1000;
      row.start_time = new Date(row.start_time).getTime() / 1000;
      update(Object.assign({}, row))
        .then(() => {
          this.$message.success("修改成功");
          done();
          this.getList();
        })
        .catch(() => {
          loading();
        });
    },
    rowDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return del(row.id);
        })
        .then(() => {
          this.$message.success("删除成功");
          this.getList();
        });
    },
    async searchChange(params, done) {
      // console.log(params);
      if (params.add_time && params.add_time.length > 0) {
        params.start_time = params.add_time[0].getTime() / 1000;
        params.end_time = params.add_time[1].getTime() / 1000;
      }

      if (done) done();
      this.params = params;
      this.page.currentPage = 1;
      await this.getList();
      this.$message.success("搜索成功");
    },
    async refreshChange() {
      await this.getList();
      this.$message.success("刷新成功");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>